<template>
  <view class="page login">
    <view class="l-logo">
      <image src="" alt="">
    </view>
    <view class="l-title">
      <view class="l-title_top">积分商城</view>
      <view class="l-title_bottom">Points Mall</view>
    </view>
    <button class="l-button" open-type="getUserInfo" @getuserinfo="wxLogin">微信用户一键登录</button>
  </view>
</template>

<script>
import { mapActions } from 'vuex';
import { model } from '@/model';
const { collection } = model;
const { Member } = collection;
import { localCache } from '@/utils/localCache';

export default {
  data () {
    return {};
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    wxLogin (e) {
      const that = this;
      uni.login({
        provider: 'weixin',
        success: function (res) {
          that.doLogin(res.code,e.detail.encryptedData,e.detail.iv);
        }
      });
    },
    doLogin (code, encryptedData, iv) {
      Member.sendApi('wxLogin', { params: {}, data: { appid:'wx7163f32100e2d670',code, encryptedData, iv } }, { errorTip: '登录失败' }).then(res => {
        const { status, data } = res;
        if (status) {
          this.toast('登录成功');
          localCache.setToken(data);
          this.getUserInfo();
          setTimeout(() => {
            this.swi('/pages/index/index');
          }, 1000);
        }
      });
    }
  }
}
</script>

<style lang="less">
.login {
  background: white;
  .layout_flex(@d: column);
  .l-logo {
    margin-top: 20%;
    image {
      width: 140rpx;
      height: 140rpx;
      background: #333;
    }
  }
  .l-title {
    margin: 30rpx 0;
    &_top {
      font-size: 38rpx;
      font-weight: bold;
      font-style: italic;
      color: #333;
    }
    &_bottom {
      font-size: 24rpx;
      font-weight: 500;
      font-style: italic;
      color: #333;
    }
  }
  .l-button {
    width: 690rpx;
    height: 90rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    background: linear-gradient(90deg, #ff7003, #ff382f);
    border-radius: 45rpx;
  }
}
</style>